<template>
  <div id="app">
    <div>{{ counter }}</div>
    <br />
    <button @click="handleAdd">加</button>
    <button @click="handleSub(-1)">减</button>
    <button @click="handleAsyncAdd($event)">异步加值</button>
    <br />
    <h1>{{ counter|evenOrOddFilter }}</h1>
  </div>
</template>

<script>
// import HelloWorld from "./components/HelloWorld.vue";

export default {
  // computed: {
  //   //运算计算属性判断是为偶数或者奇数
  //   isEvenOrOdd: function () {
  //     // 数字%2，如果是1就是奇数，如果是0，就是偶数
  //     let result = this.counter % 2 === 0 ? "偶数" : "奇数";
  //     return result;
  //   },
  // },
  // 用过滤的思想
  filters: {
    evevOrOddFilter: function (value) {
      let result = value % 2 === 0 ? "偶数" : "奇数";
      return result;
    },
  },
  data: function () {
    return {
      counter: 86,
    };
  },
  methods: {
    //同步加
    handleAdd: function () {
      this.counter++;
    },
    //同步减
    handleSub: function (step) {
      this.counter += step;
    },
    handleAsyncAdd: function (e) {
      //如果没有传入事件参数，这个定时器就会一直运行加一次就会一直加下去
      let _this = this;
      // console.log(e);
      setTimeout(() => {
        _this.counter++;
      }, 3000);
    },
  },
  name: "App",
  components: {},
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

